<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>
    <script>
      const canvas = document.querySelector(".canvas");
      const ctx = canvas.getContext("2d");
      const img = new Image();
      img.src = "./assets/logo.png";
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
      };
    </script>

    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 aPosition;
    </script>
    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment"></script>
  </body>
</html>
